<template>
	<view class="address-edit">

		<view class="item">
			<view class="name">收货人</view>
			<view class="value">
				<input v-model="address.name" type="text" placeholder="收货人姓名" />
			</view>
		</view>
		<view class="item">
			<view class="name">手机号</view>
			<view class="value">
				<input v-model="address.telephone" type="number" placeholder="收货人手机号" />
			</view>
		</view>
		<!-- 		<view class="item">
			<view class="name">所在地区</view>
			<view class="value">
				<picker mode="region" bindchange="setRegion" value="{{region}}" custom-item="{{customItem}}">
					<view class="picker">
						{{address.province_name}} {{address.city_name}} {{address.area_name}}
					</view>
				</picker>
			</view>
		</view> -->

		<view class="item">
			<view class="name">所在地区</view>
			<view class="value" v-on:click="openAddres2()">
				<view class="picker">
					{{address.province_name}} {{address.city_name}} {{address.area_name}}
				</view>
			</view>
			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'>
			</simple-address>
		</view>
		<view class="item">
			<view class="name">详细地址</view>
			<view class="value">
				<input v-model="address.detail_address" placeholder="收货地址" />

				<!-- #ifdef MP-WEIXIN -->
				<view v-on:click="setLocation" class="location" v-bind:class="{'hide':location_key==''}">
					<image mode="widthFix" src="/static/image/skin/bubble.png"></image>
					<text>定位</text>
				</view>
				<!-- #endif -->
			</view>
		</view>

		<view v-on:click="save()" class="btn btn-save">保存</view>
		<view v-on:click="remove()" class="btn btn-delete">删除</view>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	var appInstance = getApp();
	// #ifdef MP-WEIXIN
	const chooseLocation = requirePlugin('chooseLocation');
	// #endif
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1], // simple-address 组件相关变量
				pickerText: '', // simple-address 组件相关变量

				region: [],

				id: 0,
				address: {
					id: "",
					customer_id: "",

					name: "",
					telephone: "",

					area_id: "",
					area_name: "",
					city_id: "",
					city_name: "",
					province_id: "",
					province_name: "",

					detail_address: "",

					is_default: 0,

				},
				location_key: '',
			}
		},
		// 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
		onShow () {
			// #ifdef MP-WEIXIN
		    const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
			console.log( location );
			this.address.detail_address = location?location.name:this.detail_address;
			// #endif
			
			// #ifdef APP-PLUS
			this.address.detail_address = this.detail_address;
			// #endif
		},
		onLoad: function(options) {

			var t = this;
			this.location_key = appInstance.globalData.location_key
			if (options.id) {
				/* this.setData({

					id: options.id

				}, function() {
					t.get_address();
				}); */

				this.id= options.id;
				t.get_address();
			}


			// this.init();

		},

		methods: {
			get_address: function() {

				var t = this;
				var url ='&r=address.single';

				var data = {
					id: this.id
				};

				appInstance.globalData.request(url, data, 'GET', res => {

					if( res ){
						t.region[0] = res.data.province_name;
						t.region[1] = res.data.city_name;
						t.region[2] = res.data.area_name;
						t.address = res.data;
					}


				});
			},



			save: function() {

				var url ='&r=address.edit';
				url += '&id=' + this.id;

				var data = this.address;

				appInstance.globalData.request(url, data, "POST", res => {


					if (res.data.status == 0) {

						// 跳转到上个页面
						uni.navigateBack();

					}

				});

			},

			remove: function() {

				if (this.id == 0) {
					uni.navigateBack();
					return;
				}

				var url ='&r=address.remove';
				url += '&address_id=' + this.id;
				var data = {
					// address_id: this.id
				};

				appInstance.globalData.request(url, data, "POST", res => {

					if (res.data.status == 0) {
						uni.navigateBack();
					}


				});

			},

			setRegion: function(e) {

				this.address.province_name = e.detail.value[0];
				this.address.city_name = e.detail.value[1];
				this.address.area_name = e.detail.value[2];

				this.address.province_id = e.detail.code[0];
				this.address.city_id = e.detail.code[1];
				this.address.area_id = e.detail.code[2];

			},

			setLocation: function() {

				var t = this;

				uni.getLocation({
					type: 'wgs84',
					success(res) {
						const latitude = res.latitude
						const longitude = res.longitude
						const speed = res.speed
						const accuracy = res.accuracy;

						t.locationPlugin(res);
					}
				});

			},

			getLocationSIG: function(params, callback) {

				var url = '&r=address.getLocationSIG';

				var data = params;
				appInstance.globalData.request(url, data, 'GET', function(res) {

					if (!res.status) {
						callback(res.data.sig);
					}


				});

			},

			locationPlugin: function(res) {

				const key = appInstance.globalData.location_key; //使用在腾讯位置服务申请的key
				// const key = '254BZ-QQUKX-H474D-7KR67-P36L7-B6FQA'; //使用在腾讯位置服务申请的key
				const referer = '商务沟通工具'; //调用插件的app的名称
				const location = JSON.stringify({
					latitude: res.latitude,
					longitude: res.longitude
				});
				// const category = '生活服务,娱乐休闲';
				const category = '';

				uni.navigateTo({
					url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
				});
			},

			/* simple-address 组件相关方法 start */
			openAddres() {
				this.cityPickerValueDefault = [0,0,1]
				this.$refs.simpleAddress.open();
			},
			openAddres2() {
				// 根据 label 获取
				if(!this.address.province_name || !this.address.city_name || !this.address.area_name){
					this.openAddres();
					return;
				}
				var index = this.$refs.simpleAddress.queryIndex([
						this.address.province_name, 
						this.address.city_name, 
						this.address.area_name
				], 'label');
				console.log(index);
				this.cityPickerValueDefault = index.index;
				this.$refs.simpleAddress.open();
			},
			openAddres3() {
				// 根据value 获取
				var index = this.$refs.simpleAddress.queryIndex([13, 1302, 130203], 'value');
				console.log(index);
				this.cityPickerValueDefault = index.index;
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				console.log( e );
				this.address.province_name = e.labelArr[0];
				this.address.city_name = e.labelArr[1];
				this.address.area_name = e.labelArr[2];
				
				this.address.province_id = e.provinceCode;
				this.address.city_id = e.cityCode;
				this.address.area_id = e.areaCode;
				
				this.pickerText = JSON.stringify(e);
			}
			/* simple-address 组件相关方法 end */
		},
		components: {
			'simple-address':simpleAddress
		}
	}
</script>

<style lang="less">
	@import "./address-edit.less";
</style>
